import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Tabs, Button, Spin } from 'antd'
const TabPane = Tabs.TabPane;
import CreditModelSetting from 'containers/credit-setting/credit-model/credit-model-detail/credit-model-setting'
import CreditModelRules from 'containers/credit-setting/credit-model/credit-model-detail/credit-model-rules'
import CreditModelRange from 'containers/credit-setting/credit-model/credit-model-detail/credit-model-range'

class CreditModelDetail extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      tabs: [
        {key: 'setting', name: messages('credit-setting.key31')/*模型设置*/, component: <CreditModelSetting onSave={this.addTabs}/>}
      ],
      nowTab: '',
    };
  }

  componentDidMount(){
    if(this.props.creditModel.initScore !== null){
      this.addTabs();
    }
    this.setState({
      nowTab: this.props.location.query.tab || 'setting'
    })
  }

  addTabs = () => {
    const { tabs } = this.state;
    if(tabs.length === 1){
      tabs.push({key: 'rules', name: messages('credit-setting.key32')/*管理规则*/, component: <CreditModelRules />});
      tabs.push({key: 'range', name: messages('credit-setting.key33')/*应用范围*/, component: <CreditModelRange />});
      this.setState({ tabs });
    }
  };

  render() {
    const { tabs, nowTab } = this.state;
    const { creditModel } = this.props;
    return (
      <div>
        <h3 className="header-title">{creditModel.modelName}</h3>
        {creditModel.id ? (
          <Tabs onChange={nowTab => this.setState({ nowTab })} activeKey={nowTab}>
            {tabs.map(tab => <TabPane tab={tab.name}
                                      key={tab.key}
                                      disabled={creditModel.initScore === null && tab.key !== 'setting'}>
              {tab.component}
            </TabPane>)}
          </Tabs>
        ) : <Spin/>}
      </div>
    )
  }
}

CreditModelDetail.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
    creditModel: state.creditSetting.creditModel
  }
}

export default connect(mapStateToProps)(CreditModelDetail)
